
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>vue.js</title>
        <meta charset="utf-8">
        <meta name="description" content="Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono' rel='stylesheet' type='text/css'>
        <link href='//fonts.googleapis.com/css?family=Dosis:300,500&text=Vue.js' rel='stylesheet' type='text/css'>
        <link href="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" rel='stylesheet' type='text/css'>
        <link rel="icon" href="/images/logo.png" type="image/x-icon">
        <script>
            window.PAGE_TYPE = "api"
        </script>
        <link rel="stylesheet" href="/css/page.css">
        <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46852172-1', 'vuejs.org');
  ga('send', 'pageview');
</script>
        <script src="/js/vue.js"></script>
    </head>
    <body>
        <div id="mobile-bar">
            <a class="menu-button"></a>
            <a class="logo" href="/"></a>
        </div>
        
            <div id="header">
    <a id="logo" href="/">
        <img src="/images/logo.png">
        <span>Vue.js</span>
    </a>
    <ul id="nav">
        <li>
  <form id="search-form">
    <input type="text" id="search-query-nav" class="search-query st-default-search-input">
  </form>
</li>
<li><a href="/guide/" class="nav-link">Guide</a></li>
<li><a href="/api/" class="nav-link current">API</a></li>
<li><a href="/examples/" class="nav-link">Examples</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li class="nav-dropdown-container">
  <a class="nav-link">Community</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://github.com/vuejs/vue" class="nav-link" target="_blank">GitHub</a></li>
    <li><a href="http://forum.vuejs.org" class="nav-link" target="_blank">Forum</a></li>
    <li><a href="https://gitter.im/vuejs/vue" class="nav-link" target="_blank">Chat</a></li>
    <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
  </ul>
</li>


    </ul>
</div>

            <div id="main">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li>
  <form id="search-form">
    <input type="text" id="search-query-sidebar" class="search-query st-default-search-input">
  </form>
</li>
<li><a href="/guide/" class="nav-link">Guide</a></li>
<li><a href="/api/" class="nav-link current">API</a></li>
<li><a href="/examples/" class="nav-link">Examples</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li class="nav-dropdown-container">
  <a class="nav-link">Community</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://github.com/vuejs/vue" class="nav-link" target="_blank">GitHub</a></li>
    <li><a href="http://forum.vuejs.org" class="nav-link" target="_blank">Forum</a></li>
    <li><a href="https://gitter.im/vuejs/vue" class="nav-link" target="_blank">Chat</a></li>
    <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
  </ul>
</li>


    </ul>
    <div class="list">
        <div id="donate" style="margin-bottom: 20px">
            <span class="wrapper" style="width: 110px">
              <img src="/images/patreon.png">
              <a href="/support-vuejs">Support Vue.js</a>
            </span>
        </div>
        <h2>
            API
            <select class="version-select">
                <option value="">2.0</option>
                <option selected value="SELF">1.0</option>
                <option value="012">0.12</option>
                <option value="011">0.11</option>
            </select>
        </h2>
        <ul class="menu-root">
            
        </ul>
    </div>
</div>


<div class="content api with-sidebar">
    <div id="ad">
  <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script>
</div>

    <h1></h1>
    <h2 id="Global-Config"><a href="#Global-Config" class="headerlink" title="Global Config"></a>Global Config</h2><p><code>Vue.config</code> is an object containing Vue’s global configurations. You can modify its properties listed below before bootstrapping your application:</p>
<h3 id="debug"><a href="#debug" class="headerlink" title="debug"></a>debug</h3><ul>
<li><p><strong>Type:</strong> <code>Boolean</code></p>
</li>
<li><p><strong>Default:</strong> <code>false</code></p>
</li>
<li><p><strong>Usage:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">Vue.config.debug = <span class="literal">true</span></div></pre></td></tr></table></figure>
<p>When in debug mode, Vue will:</p>
<ol>
<li><p>Print stack traces for all warnings.</p>
</li>
<li><p>Make all anchor nodes visible in the DOM as Comment nodes. This makes it easier to inspect the structure of the rendered result.</p>
</li>
</ol>
<p class="tip">Debug mode is only available in development build.</p>

</li>
</ul>
<h3 id="delimiters"><a href="#delimiters" class="headerlink" title="delimiters"></a>delimiters</h3><ul>
<li><p><strong>Type:</strong> <code>Array&lt;String&gt;</code></p>
</li>
<li><p><strong>Default:</strong> <code>["{{", "}}"]</code></p>
</li>
<li><p><strong>Usage:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// ES6 template string style</span></div><div class="line">Vue.config.delimiters = [<span class="string">'$&#123;'</span>, <span class="string">'&#125;'</span>]</div></pre></td></tr></table></figure>
<p>Change the plain text interpolation delimiters.</p>
</li>
</ul>
<h3 id="unsafeDelimiters"><a href="#unsafeDelimiters" class="headerlink" title="unsafeDelimiters"></a>unsafeDelimiters</h3><ul>
<li><p><strong>Type:</strong> <code>Array&lt;String&gt;</code></p>
</li>
<li><p><strong>Default:</strong> <code>["{{{", "}}}"]</code></p>
</li>
<li><p><strong>Usage:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// make it look more dangerous</span></div><div class="line">Vue.config.unsafeDelimiters = [<span class="string">'&#123;!!'</span>, <span class="string">'!!&#125;'</span>]</div></pre></td></tr></table></figure>
<p>Change the raw HTML interpolation delimiters.</p>
</li>
</ul>
<h3 id="silent"><a href="#silent" class="headerlink" title="silent"></a>silent</h3><ul>
<li><p><strong>Type:</strong> <code>Boolean</code></p>
</li>
<li><p><strong>Default:</strong> <code>false</code></p>
</li>
<li><p><strong>Usage:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">Vue.config.silent = <span class="literal">true</span></div></pre></td></tr></table></figure>
<p>Suppress all Vue.js logs and warnings.</p>
</li>
</ul>
<h3 id="async"><a href="#async" class="headerlink" title="async"></a>async</h3><ul>
<li><p><strong>Type:</strong> <code>Boolean</code></p>
</li>
<li><p><strong>Default:</strong> <code>true</code></p>
</li>
<li><p><strong>Usage:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">Vue.config.async = <span class="literal">false</span></div></pre></td></tr></table></figure>
<p>When async mode is off, Vue will perform all DOM updates synchronously upon detecting data change. This may help with debugging in some scenarios, but could also cause degraded performance and affect the order in which watcher callbacks are called. <strong><code>async: false</code> is not recommended in production.</strong></p>
</li>
</ul>
<h3 id="devtools"><a href="#devtools" class="headerlink" title="devtools"></a>devtools</h3><ul>
<li><p><strong>Type:</strong> <code>Boolean</code></p>
</li>
<li><p><strong>Default:</strong> <code>true</code> (<code>false</code> in production builds)</p>
</li>
<li><p><strong>Usage:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// make sure to set this synchronously immediately after loading Vue</span></div><div class="line">Vue.config.devtools = <span class="literal">true</span></div></pre></td></tr></table></figure>
<p>Configure whether to allow <a href="https://github.com/vuejs/vue-devtools" target="_blank" rel="external">vue-devtools</a> inspection. This option’s default value is <code>true</code> in development builds and <code>false</code> in production builds. You can set it to <code>true</code> to enable inspection for production builds.</p>
</li>
</ul>
<h2 id="Global-API"><a href="#Global-API" class="headerlink" title="Global API"></a>Global API</h2><h3 id="Vue-extend">Vue.extend( options )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Object} options</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Create a “subclass” of the base Vue constructor. The argument should be an object containing component options.</p>
<p>The special cases to note here are <code>el</code> and <code>data</code> options - they must be functions when used with <code>Vue.extend()</code>.</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"mount-point"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// create reusable constructor</span></div><div class="line"><span class="keyword">var</span> Profile = Vue.extend(&#123;</div><div class="line">  template: <span class="string">'&lt;p&gt;&#123;&#123;firstName&#125;&#125; &#123;&#123;lastName&#125;&#125; aka &#123;&#123;alias&#125;&#125;&lt;/p&gt;'</span></div><div class="line">&#125;)</div><div class="line"><span class="comment">// create an instance of Profile</span></div><div class="line"><span class="keyword">var</span> profile = <span class="keyword">new</span> Profile(&#123;</div><div class="line">  data: &#123;</div><div class="line">    firstName: <span class="string">'Walter'</span>,</div><div class="line">    lastName: <span class="string">'White'</span>,</div><div class="line">    alias: <span class="string">'Heisenberg'</span></div><div class="line">  &#125;</div><div class="line">&#125;)</div><div class="line"><span class="comment">// mount it on an element</span></div><div class="line">profile.$mount(<span class="string">'#mount-point'</span>)</div></pre></td></tr></table></figure>
<p>Will result in:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Walter White aka Heisenberg<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/components.html">Components</a></p>
</li>
</ul>
<h3 id="Vue-nextTick">Vue.nextTick( callback )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Function} callback</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// modify data</span></div><div class="line">vm.msg = <span class="string">'Hello'</span></div><div class="line"><span class="comment">// DOM not updated yet</span></div><div class="line">Vue.nextTick(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">  <span class="comment">// DOM updated</span></div><div class="line">&#125;)</div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/reactivity.html#Async-Update-Queue">Async Update Queue</a></p>
</li>
</ul>
<h3 id="Vue-set">Vue.set( object, key, value )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Object} object</code></li>
<li><code>{String} key</code></li>
<li><code>{*} value</code></li>
</ul>
</li>
<li><p><strong>Returns:</strong> the set value.</p>
</li>
<li><p><strong>Usage:</strong></p>
<p>Set a property on an object. If the object is reactive, ensure the property is created as a reactive property and trigger view updates. This is primarily used to get around the limitation that Vue cannot detect property additions.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/reactivity.html">Reactivity in Depth</a></p>
</li>
</ul>
<h3 id="Vue-delete">Vue.delete( object, key )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Object} object</code></li>
<li><code>{String} key</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Delete a property on an object. If the object is reactive, ensure the deletion triggers view updates. This is primarily used to get around the limitation that Vue cannot detect property deletions, but you should rarely need to use it.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/reactivity.html">Reactivity in Depth</a></p>
</li>
</ul>
<h3 id="Vue-directive">Vue.directive( id, [definition] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} id</code></li>
<li><code>{Function | Object} [definition]</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Register or retrieve a global directive.</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// register</span></div><div class="line">Vue.directive(<span class="string">'my-directive'</span>, &#123;</div><div class="line">  bind: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;,</div><div class="line">  update: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;,</div><div class="line">  unbind: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;</div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="comment">// register (simple function directive)</span></div><div class="line">Vue.directive(<span class="string">'my-directive'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">  <span class="comment">// this will be called as `update`</span></div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="comment">// getter, return the directive definition if registered</span></div><div class="line"><span class="keyword">var</span> myDirective = Vue.directive(<span class="string">'my-directive'</span>)</div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/custom-directive.html">Custom Directives</a></p>
</li>
</ul>
<h3 id="Vue-elementDirective">Vue.elementDirective( id, [definition] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} id</code></li>
<li><code>{Object} [definition]</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Register or retrieve a global element directive.</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// register</span></div><div class="line">Vue.elementDirective(<span class="string">'my-element'</span>, &#123;</div><div class="line">  bind: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;,</div><div class="line">  <span class="comment">// element directives do not use `update`</span></div><div class="line">  unbind: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;</div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="comment">// getter, return the directive definition if registered</span></div><div class="line"><span class="keyword">var</span> myDirective = Vue.elementDirective(<span class="string">'my-element'</span>)</div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/custom-directive.html#Element-Directives">Element Directives</a></p>
</li>
</ul>
<h3 id="Vue-filter">Vue.filter( id, [definition] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} id</code></li>
<li><code>{Function | Object} [definition]</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Register or retrieve a global filter.</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// register</span></div><div class="line">Vue.filter(<span class="string">'my-filter'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</div><div class="line">  <span class="comment">// return processed value</span></div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="comment">// two way filter</span></div><div class="line">Vue.filter(<span class="string">'my-filter'</span>, &#123;</div><div class="line">  read: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;,</div><div class="line">  write: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;</div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="comment">// getter, return the filter if registered</span></div><div class="line"><span class="keyword">var</span> myFilter = Vue.filter(<span class="string">'my-filter'</span>)</div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/custom-filter.html">Custom Filter</a></p>
</li>
</ul>
<h3 id="Vue-component">Vue.component( id, [definition] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} id</code></li>
<li><code>{Function | Object} [definition]</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Register or retrieve a global component.</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// register an extended constructor</span></div><div class="line">Vue.component(<span class="string">'my-component'</span>, Vue.extend(&#123; <span class="comment">/* ... */</span> &#125;))</div><div class="line"></div><div class="line"><span class="comment">// register an options object (automatically call Vue.extend)</span></div><div class="line">Vue.component(<span class="string">'my-component'</span>, &#123; <span class="comment">/* ... */</span> &#125;)</div><div class="line"></div><div class="line"><span class="comment">// retrieve a registered component (always return constructor)</span></div><div class="line"><span class="keyword">var</span> MyComponent = Vue.component(<span class="string">'my-component'</span>)</div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/components.html">Components</a>.</p>
</li>
</ul>
<h3 id="Vue-transition">Vue.transition( id, [hooks] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} id</code></li>
<li><code>{Object} [hooks]</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Register or retrieve a global transition hooks object.</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// register</span></div><div class="line">Vue.transition(<span class="string">'fade'</span>, &#123;</div><div class="line">  enter: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;,</div><div class="line">  leave: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;</div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="comment">// retrieve registered hooks</span></div><div class="line"><span class="keyword">var</span> fadeTransition = Vue.transition(<span class="string">'fade'</span>)</div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/transitions.html">Transitions</a>.</p>
</li>
</ul>
<h3 id="Vue-partial">Vue.partial( id, [partial] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} id</code></li>
<li><code>{String} [partial]</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Register or retrieve a global template partial string.</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// register</span></div><div class="line">Vue.partial(<span class="string">'my-partial'</span>, <span class="string">'&lt;div&gt;Hi&lt;/div&gt;'</span>)</div><div class="line"></div><div class="line"><span class="comment">// retrieve registered partial</span></div><div class="line"><span class="keyword">var</span> myPartial = Vue.partial(<span class="string">'my-partial'</span>)</div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="#partial">Special Elements - &lt;partial&gt;</a>.</p>
</li>
</ul>
<h3 id="Vue-use">Vue.use( plugin, [options] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Object | Function} plugin</code></li>
<li><code>{Object} [options]</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Install a Vue.js plugin. If the plugin is an Object, it must expose an <code>install</code> method. If it is a function itself, it will be treated as the install method. The install method will be called with Vue as the argument.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/plugins.html">Plugins</a>.</p>
</li>
</ul>
<h3 id="Vue-mixin">Vue.mixin( mixin )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Object} mixin</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Apply a mixin globally, which affects every Vue instance created afterwards. This can be used by plugin authors to inject custom behavior into components. <strong>Not recommended in application code</strong>.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/mixins.html#Global-Mixin">Global Mixins</a></p>
</li>
</ul>
<h2 id="Options-Data"><a href="#Options-Data" class="headerlink" title="Options / Data"></a>Options / Data</h2><h3 id="data"><a href="#data" class="headerlink" title="data"></a>data</h3><ul>
<li><p><strong>Type:</strong> <code>Object | Function</code></p>
</li>
<li><p><strong>Restriction:</strong> Only accepts <code>Function</code> when used in a component definition.</p>
</li>
<li><p><strong>Details:</strong></p>
<p>The data object for the Vue instance. Vue.js will recursively convert its properties into getter/setters to make it “reactive”. <strong>The object must be plain</strong>: native objects, existing getter/setters and prototype properties are ignored. It is not recommended to observe complex objects.</p>
<p>Once the instance is created, the original data object can be accessed as <code>vm.$data</code>. The Vue instance also proxies all the properties found on the data object.</p>
<p>Properties that start with <code>_</code> or <code>$</code> will <strong>not</strong> be proxied on the Vue instance because they may conflict with Vue’s internal properties and API methods. You will have to access them as <code>vm.$data._property</code>.</p>
<p>When defining a <strong>component</strong>, <code>data</code> must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we still use a plain object for <code>data</code>, that same object will be <strong>shared by reference</strong> across all instance created! By providing a <code>data</code> function, every time a new instance is created, we can simply call it to return a fresh copy of the initial data.</p>
<p>If required, a deep clone of the original object can be obtained by passing <code>vm.$data</code> through <code>JSON.parse(JSON.stringify(...))</code>.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> data = &#123; a: <span class="number">1</span> &#125;</div><div class="line"></div><div class="line"><span class="comment">// direct instance creation</span></div><div class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</div><div class="line">  data: data</div><div class="line">&#125;)</div><div class="line">vm.a <span class="comment">// -&gt; 1</span></div><div class="line">vm.$data === data <span class="comment">// -&gt; true</span></div><div class="line"></div><div class="line"><span class="comment">// must use function when in Vue.extend()</span></div><div class="line"><span class="keyword">var</span> Component = Vue.extend(&#123;</div><div class="line">  data: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="keyword">return</span> &#123; a: <span class="number">1</span> &#125;</div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/reactivity.html">Reactivity in Depth</a>.</p>
</li>
</ul>
<h3 id="props"><a href="#props" class="headerlink" title="props"></a>props</h3><ul>
<li><p><strong>Type:</strong> <code>Array | Object</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>A list/hash of attributes that are exposed to accept data from the parent component. It has a simple Array-based syntax and an alternative Object-based syntax that allows advanced configurations such as type checking, custom validation and default values.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// simple syntax</span></div><div class="line">Vue.component(<span class="string">'props-demo-simple'</span>, &#123;</div><div class="line">  props: [<span class="string">'size'</span>, <span class="string">'myMessage'</span>]</div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="comment">// object syntax with validation</span></div><div class="line">Vue.component(<span class="string">'props-demo-advanced'</span>, &#123;</div><div class="line">  props: &#123;</div><div class="line">    <span class="comment">// just type check</span></div><div class="line">    size: <span class="built_in">Number</span>,</div><div class="line">    <span class="comment">// type check plus other validations</span></div><div class="line">    name: &#123;</div><div class="line">      type: <span class="built_in">String</span>,</div><div class="line">      required: <span class="literal">true</span>,</div><div class="line">      <span class="comment">// warn if not two way bound</span></div><div class="line">      twoWay: <span class="literal">true</span></div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/components.html#Props">Props</a></p>
</li>
</ul>
<h3 id="propsData"><a href="#propsData" class="headerlink" title="propsData"></a>propsData</h3><blockquote>
<p>1.0.22+</p>
</blockquote>
<ul>
<li><p><strong>Type:</strong> <code>Object</code></p>
</li>
<li><p><strong>Restriction:</strong> only respected in instance creation via <code>new</code>.</p>
</li>
<li><p><strong>Details:</strong></p>
<p>Pass props to an instance during its creation. This is primarily intended to make unit testing easier.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> Comp = Vue.extend(&#123;</div><div class="line">  props: [<span class="string">'msg'</span>],</div><div class="line">  template: <span class="string">'&lt;div&gt;&#123;&#123; msg &#125;&#125;&lt;/div&gt;'</span></div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Comp(&#123;</div><div class="line">  propsData: &#123;</div><div class="line">    msg: <span class="string">'hello'</span></div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="computed"><a href="#computed" class="headerlink" title="computed"></a>computed</h3><ul>
<li><p><strong>Type:</strong> <code>Object</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>Computed properties to be mixed into the Vue instance. All getters and setters have their <code>this</code> context automatically bound to the Vue instance.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</div><div class="line">  data: &#123; a: <span class="number">1</span> &#125;,</div><div class="line">  computed: &#123;</div><div class="line">    <span class="comment">// get only, just need a function</span></div><div class="line">    aDouble: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">      <span class="keyword">return</span> <span class="keyword">this</span>.a * <span class="number">2</span></div><div class="line">    &#125;,</div><div class="line">    <span class="comment">// both get and set</span></div><div class="line">    aPlus: &#123;</div><div class="line">      get: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.a + <span class="number">1</span></div><div class="line">      &#125;,</div><div class="line">      set: <span class="function"><span class="keyword">function</span> (<span class="params">v</span>) </span>&#123;</div><div class="line">        <span class="keyword">this</span>.a = v - <span class="number">1</span></div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;)</div><div class="line">vm.aPlus   <span class="comment">// -&gt; 2</span></div><div class="line">vm.aPlus = <span class="number">3</span></div><div class="line">vm.a       <span class="comment">// -&gt; 2</span></div><div class="line">vm.aDouble <span class="comment">// -&gt; 4</span></div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong></p>
<ul>
<li><a href="/guide/computed.html">Computed Properties</a></li>
<li><a href="/guide/reactivity.html#Inside-Computed-Properties">Reactivity in Depth: Inside Computed Properties</a></li>
</ul>
</li>
</ul>
<h3 id="methods"><a href="#methods" class="headerlink" title="methods"></a>methods</h3><ul>
<li><p><strong>Type:</strong> <code>Object</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their <code>this</code> context automatically bound to the Vue instance.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</div><div class="line">  data: &#123; a: <span class="number">1</span> &#125;,</div><div class="line">  methods: &#123;</div><div class="line">    plus: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">      <span class="keyword">this</span>.a++</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;)</div><div class="line">vm.plus()</div><div class="line">vm.a <span class="comment">// 2</span></div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/events.html">Methods and Event Handling</a></p>
</li>
</ul>
<h3 id="watch"><a href="#watch" class="headerlink" title="watch"></a>watch</h3><ul>
<li><p><strong>Type:</strong> <code>Object</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. The Vue instance will call <code>$watch()</code> for each entry in the object at instantiation.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</div><div class="line">  data: &#123;</div><div class="line">    a: <span class="number">1</span></div><div class="line">  &#125;,</div><div class="line">  watch: &#123;</div><div class="line">    <span class="string">'a'</span>: <span class="function"><span class="keyword">function</span> (<span class="params">val, oldVal</span>) </span>&#123;</div><div class="line">      <span class="built_in">console</span>.log(<span class="string">'new: %s, old: %s'</span>, val, oldVal)</div><div class="line">    &#125;,</div><div class="line">    <span class="comment">// string method name</span></div><div class="line">    <span class="string">'b'</span>: <span class="string">'someMethod'</span>,</div><div class="line">    <span class="comment">// deep watcher</span></div><div class="line">    <span class="string">'c'</span>: &#123;</div><div class="line">      handler: <span class="function"><span class="keyword">function</span> (<span class="params">val, oldVal</span>) </span>&#123; <span class="comment">/* ... */</span> &#125;,</div><div class="line">      deep: <span class="literal">true</span></div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;)</div><div class="line">vm.a = <span class="number">2</span> <span class="comment">// -&gt; new: 2, old: 1</span></div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="#vm-watch">Instance Methods - vm.$watch</a></p>
</li>
</ul>
<h2 id="Options-DOM"><a href="#Options-DOM" class="headerlink" title="Options / DOM"></a>Options / DOM</h2><h3 id="el"><a href="#el" class="headerlink" title="el"></a>el</h3><ul>
<li><p><strong>Type:</strong> <code>String | HTMLElement | Function</code></p>
</li>
<li><p><strong>Restriction:</strong> only accepts type <code>Function</code> when used in a component definition.</p>
</li>
<li><p><strong>Details:</strong></p>
<p>Provide the Vue instance an existing DOM element to mount on. It can be a CSS selector string, an actual HTMLElement, or a function that returns an HTMLElement. Note that the provided element merely serves as a mounting point; it will be replaced if a template is also provided, unless <code>replace</code> is set to false. The resolved element will be accessible as <code>vm.$el</code>.</p>
<p>When used in <code>Vue.extend</code>, a function must be provided so each instance gets a separately created element.</p>
<p>If this option is available at instantiation, the instance will immediately enter compilation; otherwise, the user will have to explicitly call <code>vm.$mount()</code> to manually start the compilation.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/instance.html#Lifecycle-Diagram">Lifecycle Diagram</a></p>
</li>
</ul>
<h3 id="template"><a href="#template" class="headerlink" title="template"></a>template</h3><ul>
<li><p><strong>Type:</strong> <code>String</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>A string template to be used as the markup for the Vue instance. By default, the template will <strong>replace</strong> the mounted element. When the <code>replace</code> option is set to <code>false</code>, the template will be inserted into the mounted element instead. In both cases, any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template.</p>
<p>If the string starts with <code>#</code> it will be used as a querySelector and use the selected element’s innerHTML as the template string. This allows the use of the common <code>&lt;script type=&quot;x-template&quot;&gt;</code> trick to include templates.</p>
<p>Note that under certain situations, for example when the template contains more than one top-level element, or contains only plain text, the instance will become a fragment instance - i.e. one that manages a list of nodes rather than a single node. Non flow-control directives on the mount point for fragment instances are ignored.</p>
</li>
<li><p><strong>See also:</strong></p>
<ul>
<li><a href="/guide/instance.html#Lifecycle-Diagram">Lifecycle Diagram</a></li>
<li><a href="/guide/components.html#Content-Distribution-with-Slots">Content Distribution</a></li>
<li><a href="/guide/components.html#Fragment-Instance">Fragment Instance</a></li>
</ul>
</li>
</ul>
<h3 id="replace"><a href="#replace" class="headerlink" title="replace"></a>replace</h3><ul>
<li><p><strong>Type:</strong> <code>Boolean</code></p>
</li>
<li><p><strong>Default:</strong> <code>true</code></p>
</li>
<li><p><strong>Restriction:</strong> only respected if the <strong>template</strong> option is also present.</p>
</li>
<li><p><strong>Details:</strong></p>
<p>Determines whether to replace the element being mounted on with the template. If set to <code>false</code>, the template will overwrite the element’s inner content without replacing the element itself. If set to <code>true</code>, the template will overwrite the element and merge the element’s attributes with the attributes of the component’s root node.</p>
</li>
<li><p><strong>Example</strong>:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"replace"</span> <span class="attr">class</span>=<span class="string">"foo"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">new</span> Vue(&#123;</div><div class="line">  el: <span class="string">'#replace'</span>,</div><div class="line">  template: <span class="string">'&lt;p class="bar"&gt;replaced&lt;/p&gt;'</span></div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>Will result in:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"foo bar"</span> <span class="attr">id</span>=<span class="string">"replace"</span>&gt;</span>replaced<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div></pre></td></tr></table></figure>
<p>In comparison, when <code>replace</code> is set to <code>false</code>:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"insert"</span> <span class="attr">class</span>=<span class="string">"foo"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">new</span> Vue(&#123;</div><div class="line">  el: <span class="string">'#insert'</span>,</div><div class="line">  replace: <span class="literal">false</span>,</div><div class="line">  template: <span class="string">'&lt;p class="bar"&gt;inserted&lt;/p&gt;'</span></div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>Will result in:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"insert"</span> <span class="attr">class</span>=<span class="string">"foo"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"bar"</span>&gt;</span>inserted<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="Options-Lifecycle-Hooks"><a href="#Options-Lifecycle-Hooks" class="headerlink" title="Options / Lifecycle Hooks"></a>Options / Lifecycle Hooks</h2><h3 id="init"><a href="#init" class="headerlink" title="init"></a>init</h3><ul>
<li><p><strong>Type:</strong> <code>Function</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>Called synchronously after the instance has just been initialized, before data observation and event / watcher setup.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/instance.html#Lifecycle-Diagram">Lifecycle Diagram</a></p>
</li>
</ul>
<h3 id="created"><a href="#created" class="headerlink" title="created"></a>created</h3><ul>
<li><p><strong>Type:</strong> <code>Function</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, DOM compilation has not been started, and the <code>$el</code> property will not be available yet.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/instance.html#Lifecycle-Diagram">Lifecycle Diagram</a></p>
</li>
</ul>
<h3 id="beforeCompile"><a href="#beforeCompile" class="headerlink" title="beforeCompile"></a>beforeCompile</h3><ul>
<li><p><strong>Type:</strong> <code>Function</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>Called right before the compilation starts.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/instance.html#Lifecycle-Diagram">Lifecycle Diagram</a></p>
</li>
</ul>
<h3 id="compiled"><a href="#compiled" class="headerlink" title="compiled"></a>compiled</h3><ul>
<li><p><strong>Type:</strong> <code>Function</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>Called after the compilation is finished. At this stage all directives have been linked so data changes will trigger DOM updates. However, <code>$el</code> is not guaranteed to have been inserted into the document yet.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/instance.html#Lifecycle-Diagram">Lifecycle Diagram</a></p>
</li>
</ul>
<h3 id="activate"><a href="#activate" class="headerlink" title="activate"></a>activate</h3><ul>
<li><p><strong>Type:</strong> <code>Function</code></p>
</li>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Function} done</code></li>
</ul>
</li>
<li><p><strong>Details:</strong></p>
<p>Called after compilation is finished, right before the <code>ready</code> hook - but <strong>only</strong> during dynamic component swapping or in the initial render for static components. Unlike other lifecycle hooks, it accepts a <code>done</code> callback, which must be called for the rest of the lifecycle to complete. It’s most useful for performing some asynchronous operation before a component is swapped in, like fetching data from an API.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/components.html#Dynamic-Components">Dynamic Components</a></p>
</li>
</ul>
<h3 id="ready"><a href="#ready" class="headerlink" title="ready"></a>ready</h3><ul>
<li><p><strong>Type:</strong> <code>Function</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>Called after compilation <strong>and</strong> the <code>$el</code> is <strong>inserted into the document for the first time</strong>, i.e. right after the first <code>attached</code> hook. Note this insertion must be executed via Vue (with methods like <code>vm.$appendTo()</code> or as a result of a directive update) to trigger the <code>ready</code> hook.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/instance.html#Lifecycle-Diagram">Lifecycle Diagram</a></p>
</li>
</ul>
<h3 id="attached"><a href="#attached" class="headerlink" title="attached"></a>attached</h3><ul>
<li><p><strong>Type:</strong> <code>Function</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>Called when <code>vm.$el</code> is attached to DOM by a directive or a VM instance method such as <code>$appendTo()</code>. Direct manipulation of <code>vm.$el</code> will <strong>not</strong> trigger this hook.</p>
</li>
</ul>
<h3 id="detached"><a href="#detached" class="headerlink" title="detached"></a>detached</h3><ul>
<li><p><strong>Type:</strong> <code>Function</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>Called when <code>vm.$el</code> is removed from the DOM by a directive or a VM instance method. Direct manipulation of <code>vm.$el</code> will <strong>not</strong> trigger this hook.</p>
</li>
</ul>
<h3 id="beforeDestroy"><a href="#beforeDestroy" class="headerlink" title="beforeDestroy"></a>beforeDestroy</h3><ul>
<li><p><strong>Type:</strong> <code>Function</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>Called right before a Vue instance is destroyed. At this stage the instance is still fully functional.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/instance.html#Lifecycle-Diagram">Lifecycle Diagram</a></p>
</li>
</ul>
<h3 id="destroyed"><a href="#destroyed" class="headerlink" title="destroyed"></a>destroyed</h3><ul>
<li><p><strong>Type:</strong> <code>Function</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>Called after a Vue instance has been destroyed. When this hook is called, all bindings and directives of the Vue instance have been unbound and all child Vue instances have also been destroyed.</p>
<p>Note if there is a leaving transition, the <code>destroyed</code> hook is called <strong>after</strong> the transition has finished.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/instance.html#Lifecycle-Diagram">Lifecycle Diagram</a></p>
</li>
</ul>
<h2 id="Options-Assets"><a href="#Options-Assets" class="headerlink" title="Options / Assets"></a>Options / Assets</h2><h3 id="directives"><a href="#directives" class="headerlink" title="directives"></a>directives</h3><ul>
<li><p><strong>Type:</strong> <code>Object</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>A hash of directives to be made available to the Vue instance.</p>
</li>
<li><p><strong>See also:</strong></p>
<ul>
<li><a href="/guide/custom-directive.html">Custom Directives</a></li>
<li><a href="/guide/components.html#Assets-Naming-Convention">Assets Naming Convention</a></li>
</ul>
</li>
</ul>
<h3 id="elementDirectives"><a href="#elementDirectives" class="headerlink" title="elementDirectives"></a>elementDirectives</h3><ul>
<li><p><strong>Type:</strong> <code>Object</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>A hash of element directives to be made available to the Vue instance.</p>
</li>
<li><p><strong>See also:</strong></p>
<ul>
<li><a href="/guide/custom-directive.html#Element-Directives">Element Directives</a></li>
<li><a href="/guide/components.html#Assets-Naming-Convention">Assets Naming Convention</a></li>
</ul>
</li>
</ul>
<h3 id="filters"><a href="#filters" class="headerlink" title="filters"></a>filters</h3><ul>
<li><p><strong>Type:</strong> <code>Object</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>A hash of filters to be made available to the Vue instance.</p>
</li>
<li><p><strong>See also:</strong></p>
<ul>
<li><a href="/guide/custom-filter.html">Custom Filters</a></li>
<li><a href="/guide/components.html#Assets-Naming-Convention">Assets Naming Convention</a></li>
</ul>
</li>
</ul>
<h3 id="components"><a href="#components" class="headerlink" title="components"></a>components</h3><ul>
<li><p><strong>Type:</strong> <code>Object</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>A hash of components to be made available to the Vue instance.</p>
</li>
<li><p><strong>See also:</strong></p>
<ul>
<li><a href="/guide/components.html">Components</a></li>
</ul>
</li>
</ul>
<h3 id="transitions"><a href="#transitions" class="headerlink" title="transitions"></a>transitions</h3><ul>
<li><p><strong>Type:</strong> <code>Object</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>A hash of transitions to be made available to the Vue instance.</p>
</li>
<li><p><strong>See also:</strong></p>
<ul>
<li><a href="/guide/transitions.html">Transitions</a></li>
</ul>
</li>
</ul>
<h3 id="partials"><a href="#partials" class="headerlink" title="partials"></a>partials</h3><ul>
<li><p><strong>Type:</strong> <code>Object</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>A hash of partial strings to be made available to the Vue instance.</p>
</li>
<li><p><strong>See also:</strong></p>
<ul>
<li><a href="#partial">Special Elements - partial</a></li>
</ul>
</li>
</ul>
<h2 id="Options-Misc"><a href="#Options-Misc" class="headerlink" title="Options / Misc"></a>Options / Misc</h2><h3 id="parent"><a href="#parent" class="headerlink" title="parent"></a>parent</h3><ul>
<li><p><strong>Type:</strong> <code>Vue instance</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>Specify the parent instance for the instance to be created. Establishes a parent-child relationship between the two. The parent will be accessible as <code>this.$parent</code> for the child, and the child will be pushed into the parent’s <code>$children</code> array.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/components.html#Parent-Child-Communication">Parent-Child Communication</a></p>
</li>
</ul>
<h3 id="events"><a href="#events" class="headerlink" title="events"></a>events</h3><ul>
<li><p><strong>Type:</strong> <code>Object</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>An object where keys are events to listen for and values are the corresponding callbacks. Note these are Vue events rather than DOM events. The value can also be a string of a method name. The Vue instance will call <code>$on()</code> for each entry in the object at instantiation.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</div><div class="line">  events: &#123;</div><div class="line">    <span class="string">'hook:created'</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">      <span class="built_in">console</span>.log(<span class="string">'created!'</span>)</div><div class="line">    &#125;,</div><div class="line">    greeting: <span class="function"><span class="keyword">function</span> (<span class="params">msg</span>) </span>&#123;</div><div class="line">      <span class="built_in">console</span>.log(msg)</div><div class="line">    &#125;,</div><div class="line">    <span class="comment">// can also use a string for methods</span></div><div class="line">    bye: <span class="string">'sayGoodbye'</span></div><div class="line">  &#125;,</div><div class="line">  methods: &#123;</div><div class="line">    sayGoodbye: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">      <span class="built_in">console</span>.log(<span class="string">'goodbye!'</span>)</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;) <span class="comment">// -&gt; created!</span></div><div class="line">vm.$emit(<span class="string">'greeting'</span>, <span class="string">'hi!'</span>) <span class="comment">// -&gt; hi!</span></div><div class="line">vm.$emit(<span class="string">'bye'</span>)             <span class="comment">// -&gt; goodbye!</span></div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong></p>
<ul>
<li><a href="#Instance-Methods-Events">Instance Methods - Events</a></li>
<li><a href="/guide/components.html#Parent-Child-Communication">Parent-Child Communication</a></li>
</ul>
</li>
</ul>
<h3 id="mixins"><a href="#mixins" class="headerlink" title="mixins"></a>mixins</h3><ul>
<li><p><strong>Type:</strong> <code>Array</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>The <code>mixins</code> option accepts an array of mixin objects. These mixin objects can contain instance options just like normal instance objects, and they will be merged against the eventual options using the same option merging logic in <code>Vue.extend()</code>. e.g. If your mixin contains a created hook and the component itself also has one, both functions will be called.</p>
<p>Mixin hooks are called in the order they are provided, and called before the component’s own hooks.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> mixin = &#123;</div><div class="line">  created: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="number">1</span>) &#125;</div><div class="line">&#125;</div><div class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</div><div class="line">  created: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="number">2</span>) &#125;,</div><div class="line">  mixins: [mixin]</div><div class="line">&#125;)</div><div class="line"><span class="comment">// -&gt; 1</span></div><div class="line"><span class="comment">// -&gt; 2</span></div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/mixins.html">Mixins</a></p>
</li>
</ul>
<h3 id="name"><a href="#name" class="headerlink" title="name"></a>name</h3><ul>
<li><p><strong>Type:</strong> <code>String</code></p>
</li>
<li><p><strong>Restriction:</strong> only respected when used in <code>Vue.extend()</code>.</p>
</li>
<li><p><strong>Details:</strong></p>
<p>Allow the component to recursively invoke itself in its template. Note that when a component is registered globally with <code>Vue.component()</code>, the global ID is automatically set as its name.</p>
<p>Another benefit of specifying a <code>name</code> option is console inspection. When inspecting an extended Vue component in the console, the default constructor name is <code>VueComponent</code>, which isn’t very informative. By passing in an optional <code>name</code> option to <code>Vue.extend()</code>, you will get a better inspection output so that you know which component you are looking at. The string will be camelized and used as the component’s constructor name.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> Ctor = Vue.extend(&#123;</div><div class="line">  name: <span class="string">'stack-overflow'</span>,</div><div class="line">  template:</div><div class="line">    <span class="string">'&lt;div&gt;'</span> +</div><div class="line">      <span class="comment">// recursively invoke self</span></div><div class="line">      <span class="string">'&lt;stack-overflow&gt;&lt;/stack-overflow&gt;'</span> +</div><div class="line">    <span class="string">'&lt;/div&gt;'</span></div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="comment">// this will actually result in a max stack size exceeded</span></div><div class="line"><span class="comment">// error, but let's assume it works...</span></div><div class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Ctor()</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(vm) <span class="comment">// -&gt; StackOverflow &#123;$el: null, ...&#125;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="extends"><a href="#extends" class="headerlink" title="extends"></a>extends</h3><blockquote>
<p>1.0.22+</p>
</blockquote>
<ul>
<li><p><strong>Type:</strong> <code>Object | Function</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>Allows declaratively extending another component (could be either a plain options object or a constructor) without having to use <code>Vue.extend</code>. This is primarily intended to make it easier to extend between single file components.</p>
<p>This is similar to <code>mixins</code>, the difference being that the component’s own options takes higher priority than the source component being extended.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> CompA = &#123; ... &#125;</div><div class="line"></div><div class="line"><span class="comment">// extend CompA without having to call Vue.extend on either</span></div><div class="line"><span class="keyword">var</span> CompB = &#123;</div><div class="line">  extends: CompA,</div><div class="line">  ...</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="Instance-Properties"><a href="#Instance-Properties" class="headerlink" title="Instance Properties"></a>Instance Properties</h2><h3 id="vm-data"><a href="#vm-data" class="headerlink" title="vm.$data"></a>vm.$data</h3><ul>
<li><p><strong>Type:</strong> <code>Object</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>The data object that the Vue instance is observing. You can swap it with a new object. The Vue instance proxies access to the properties on its data object.</p>
</li>
</ul>
<h3 id="vm-el"><a href="#vm-el" class="headerlink" title="vm.$el"></a>vm.$el</h3><ul>
<li><p><strong>Type:</strong> <code>HTMLElement</code></p>
</li>
<li><p><strong>Read only</strong></p>
</li>
<li><p><strong>Details:</strong></p>
<p>The DOM element that the Vue instance is managing. Note that for <a href="/guide/components.html#Fragment-Instance">Fragment Instances</a>, <code>vm.$el</code> will return an anchor node that indicates the starting position of the fragment.</p>
</li>
</ul>
<h3 id="vm-options"><a href="#vm-options" class="headerlink" title="vm.$options"></a>vm.$options</h3><ul>
<li><p><strong>Type:</strong> <code>Object</code></p>
</li>
<li><p><strong>Read only</strong></p>
</li>
<li><p><strong>Details:</strong></p>
<p>The instantiation options used for the current Vue instance. This is useful when you want to include custom properties in the options:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">new</span> Vue(&#123;</div><div class="line">  customOption: <span class="string">'foo'</span>,</div><div class="line">  created: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.$options.customOption) <span class="comment">// -&gt; 'foo'</span></div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="vm-parent"><a href="#vm-parent" class="headerlink" title="vm.$parent"></a>vm.$parent</h3><ul>
<li><p><strong>Type:</strong> <code>Vue instance</code></p>
</li>
<li><p><strong>Read only</strong></p>
</li>
<li><p><strong>Details:</strong></p>
<p>The parent instance, if the current instance has one.</p>
</li>
</ul>
<h3 id="vm-root"><a href="#vm-root" class="headerlink" title="vm.$root"></a>vm.$root</h3><ul>
<li><p><strong>Type:</strong> <code>Vue instance</code></p>
</li>
<li><p><strong>Read only</strong></p>
</li>
<li><p><strong>Details:</strong></p>
<p>The root Vue instance of the current component tree. If the current instance has no parents this value will be itself.</p>
</li>
</ul>
<h3 id="vm-children"><a href="#vm-children" class="headerlink" title="vm.$children"></a>vm.$children</h3><ul>
<li><p><strong>Type:</strong> <code>Array&lt;Vue instance&gt;</code></p>
</li>
<li><p><strong>Read only</strong></p>
</li>
<li><p><strong>Details:</strong></p>
<p>The direct child components of the current instance.</p>
</li>
</ul>
<h3 id="vm-refs"><a href="#vm-refs" class="headerlink" title="vm.$refs"></a>vm.$refs</h3><ul>
<li><p><strong>Type:</strong> <code>Object</code></p>
</li>
<li><p><strong>Read only</strong></p>
</li>
<li><p><strong>Details:</strong></p>
<p>An object that holds child components that have <code>v-ref</code> registered.</p>
</li>
<li><p><strong>See also:</strong></p>
<ul>
<li><a href="/guide/components.html#Child-Component-Refs">Child Component Refs</a></li>
<li><a href="#v-ref">v-ref</a>.</li>
</ul>
</li>
</ul>
<h3 id="vm-els"><a href="#vm-els" class="headerlink" title="vm.$els"></a>vm.$els</h3><ul>
<li><p><strong>Type:</strong> <code>Object</code></p>
</li>
<li><p><strong>Read only</strong></p>
</li>
<li><p><strong>Details:</strong></p>
<p>An object that holds DOM elements that have <code>v-el</code> registered.</p>
</li>
<li><p><strong>See also:</strong> <a href="#v-el">v-el</a>.</p>
</li>
</ul>
<h2 id="Instance-Methods-Data"><a href="#Instance-Methods-Data" class="headerlink" title="Instance Methods / Data"></a>Instance Methods / Data</h2><h3 id="vm-watch">vm.$watch( expOrFn, callback, [options] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String | Function} expOrFn</code></li>
<li><code>{Function} callback</code></li>
<li><code>{Object} [options]</code><ul>
<li><code>{Boolean} deep</code></li>
<li><code>{Boolean} immediate</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong>Returns:</strong> <code>{Function} unwatch</code></p>
</li>
<li><p><strong>Usage:</strong></p>
<p>Watch an expression or a computed function on the Vue instance for changes. The callback gets called with the new value and the old value. The expression can be a single keypath or any valid binding expressions.</p>
</li>
</ul>
<p class="tip">Note: when mutating (rather than replacing) an Object or an Array, the old value will be the same as new value because they reference the same Object/Array. Vue doesn’t keep a copy of the pre-mutate value.</p>

<ul>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// keypath</span></div><div class="line">vm.$watch(<span class="string">'a.b.c'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">newVal, oldVal</span>) </span>&#123;</div><div class="line">  <span class="comment">// do something</span></div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="comment">// expression</span></div><div class="line">vm.$watch(<span class="string">'a + b'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">newVal, oldVal</span>) </span>&#123;</div><div class="line">  <span class="comment">// do something</span></div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="comment">// function</span></div><div class="line">vm.$watch(</div><div class="line">  <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.a + <span class="keyword">this</span>.b</div><div class="line">  &#125;,</div><div class="line">  <span class="function"><span class="keyword">function</span> (<span class="params">newVal, oldVal</span>) </span>&#123;</div><div class="line">    <span class="comment">// do something</span></div><div class="line">  &#125;</div><div class="line">)</div></pre></td></tr></table></figure>
<p><code>vm.$watch</code> returns an unwatch function that stops firing the callback:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> unwatch = vm.$watch(<span class="string">'a'</span>, cb)</div><div class="line"><span class="comment">// later, teardown the watcher</span></div><div class="line">unwatch()</div></pre></td></tr></table></figure>
</li>
<li><p><strong>Option: deep</strong></p>
<p>To also detect nested value changes inside Objects, you need to pass in <code>deep: true</code> in the options argument. Note that you don’t need to do so to listen for Array mutations.</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">vm.$watch(<span class="string">'someObject'</span>, callback, &#123;</div><div class="line">  deep: <span class="literal">true</span></div><div class="line">&#125;)</div><div class="line">vm.someObject.nestedValue = <span class="number">123</span></div><div class="line"><span class="comment">// callback is fired</span></div></pre></td></tr></table></figure>
</li>
<li><p><strong>Option: immediate</strong></p>
<p>Passing in <code>immediate: true</code> in the option will trigger the callback immediately with the current value of the expression:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">vm.$watch(<span class="string">'a'</span>, callback, &#123;</div><div class="line">  immediate: <span class="literal">true</span></div><div class="line">&#125;)</div><div class="line"><span class="comment">// callback is fired immediately with current value of `a`</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="vm-get">vm.$get( expression )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} expression</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Retrieve a value from the Vue instance given an expression. Expressions that throw errors will be suppressed and return <code>undefined</code>.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</div><div class="line">  data: &#123;</div><div class="line">    a: &#123;</div><div class="line">      b: <span class="number">1</span></div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;)</div><div class="line">vm.$get(<span class="string">'a.b'</span>) <span class="comment">// -&gt; 1</span></div><div class="line">vm.$get(<span class="string">'a.b + 1'</span>) <span class="comment">// -&gt; 2</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="vm-set">vm.$set( keypath, value )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} keypath</code></li>
<li><code>{*} value</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Set a data value on the Vue instance given a valid keypath. In most cases you should prefer setting properties using plain object syntax, e.g. <code>vm.a.b = 123</code>. This method is only needed in two scenarios:</p>
<ol>
<li><p>When you have a keypath string and want to dynamically set the value using that keypath.</p>
</li>
<li><p>When you want to set a property that doesn’t exist.</p>
</li>
</ol>
<p>If the path doesn’t exist it will be recursively created and made reactive. If a new root-level reactive property is created due to a <code>$set</code> call, the Vue instance will be forced into a “digest cycle”, during which all its watchers are re-evaluated.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</div><div class="line">  data: &#123;</div><div class="line">    a: &#123;</div><div class="line">      b: <span class="number">1</span></div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="comment">// set an existing path</span></div><div class="line">vm.$set(<span class="string">'a.b'</span>, <span class="number">2</span>)</div><div class="line">vm.a.b <span class="comment">// -&gt; 2</span></div><div class="line"></div><div class="line"><span class="comment">// set a non-existent path, will force digest</span></div><div class="line">vm.$set(<span class="string">'c'</span>, <span class="number">3</span>)</div><div class="line">vm.c <span class="comment">// -&gt; 3</span></div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/reactivity.html">Reactivity in Depth</a></p>
</li>
</ul>
<h3 id="vm-delete">vm.$delete( key )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} key</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Delete a root level property on the Vue instance (and also its <code>$data</code>). Forces a digest cycle. Not recommended.</p>
</li>
</ul>
<h3 id="vm-eval">vm.$eval( expression )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} expression</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Evaluate a valid binding expression on the current instance. The expression can also contain filters.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// assuming vm.msg = 'hello'</span></div><div class="line">vm.$<span class="built_in">eval</span>(<span class="string">'msg | uppercase'</span>) <span class="comment">// -&gt; 'HELLO'</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="vm-interpolate">vm.$interpolate( templateString )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} templateString</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Evaluate a piece of template string containing mustache interpolations. Note that this method simply performs string interpolation; attribute directives are ignored.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// assuming vm.msg = 'hello'</span></div><div class="line">vm.$interpolate(<span class="string">'&#123;&#123;msg&#125;&#125; world!'</span>) <span class="comment">// -&gt; 'hello world!'</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="vm-log">vm.$log( [keypath] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} [keypath]</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Log the current instance data as a plain object, which is more inspection-friendly than a bunch of getter/setters. Also accepts an optional key.</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">vm.$log() <span class="comment">// logs entire ViewModel data</span></div><div class="line">vm.$log(<span class="string">'item'</span>) <span class="comment">// logs vm.item</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="Instance-Methods-Events"><a href="#Instance-Methods-Events" class="headerlink" title="Instance Methods / Events"></a>Instance Methods / Events</h2><h3 id="vm-on">vm.$on( event, callback )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} event</code></li>
<li><code>{Function} callback</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Listen for a custom event on the current vm. Events can be triggered by <code>vm.$emit</code>, <code>vm.$dispatch</code> or <code>vm.$broadcast</code>. The callback will receive all the additional arguments passed into these event-triggering methods.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">vm.$on(<span class="string">'test'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">msg</span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(msg)</div><div class="line">&#125;)</div><div class="line">vm.$emit(<span class="string">'test'</span>, <span class="string">'hi'</span>)</div><div class="line"><span class="comment">// -&gt; "hi"</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="vm-once">vm.$once( event, callback )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} event</code></li>
<li><code>{Function} callback</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.</p>
</li>
</ul>
<h3 id="vm-off">vm.$off( [event, callback] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} [event]</code></li>
<li><code>{Function} [callback]</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Remove event listener(s).</p>
<ul>
<li><p>If no arguments are provided, remove all event listeners;</p>
</li>
<li><p>If only the event is provided, remove all listeners for that event;</p>
</li>
<li><p>If both event and callback are given, remove the listener for that specific callback only.</p>
</li>
</ul>
</li>
</ul>
<h3 id="vm-emit">vm.$emit( event, […args] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} event</code></li>
<li><code>[...args]</code></li>
</ul>
<p>Trigger an event on the current instance. Any additional arguments will be passed into the listener’s callback function.</p>
</li>
</ul>
<h3 id="vm-dispatch">vm.$dispatch( event, […args] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} event</code></li>
<li><code>[...args]</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Dispatch an event, first triggering it on the instance itself, and then propagates upward along the parent chain. The propagation stops when it triggers a parent event listener, unless that listener returns <code>true</code>. Any additional arguments will be passed into the listener’s callback function.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// create a parent chain</span></div><div class="line"><span class="keyword">var</span> parent = <span class="keyword">new</span> Vue()</div><div class="line"><span class="keyword">var</span> child1 = <span class="keyword">new</span> Vue(&#123; parent: parent &#125;)</div><div class="line"><span class="keyword">var</span> child2 = <span class="keyword">new</span> Vue(&#123; parent: child1 &#125;)</div><div class="line"></div><div class="line">parent.$on(<span class="string">'test'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'parent notified'</span>)</div><div class="line">&#125;)</div><div class="line">child1.$on(<span class="string">'test'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'child1 notified'</span>)</div><div class="line">&#125;)</div><div class="line">child2.$on(<span class="string">'test'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'child2 notified'</span>)</div><div class="line">&#125;)</div><div class="line"></div><div class="line">child2.$dispatch(<span class="string">'test'</span>)</div><div class="line"><span class="comment">// -&gt; "child2 notified"</span></div><div class="line"><span class="comment">// -&gt; "child1 notified"</span></div><div class="line"><span class="comment">// parent is NOT notified, because child1 didn't return</span></div><div class="line"><span class="comment">// true in its callback</span></div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/components.html#Parent-Child-Communication">Parent-Child Communication</a></p>
</li>
</ul>
<h3 id="vm-broadcast">vm.$broadcast( event, […args] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} event</code></li>
<li><code>[...args]</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Broadcast an event that propagates downward to all descendants of the current instance. Since the descendants expand into multiple sub-trees, the event propagation will follow many different “paths”. The propagation for each path will stop when a listener callback is fired along that path, unless the callback returns <code>true</code>.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> parent = <span class="keyword">new</span> Vue()</div><div class="line"><span class="comment">// child1 and child2 are siblings</span></div><div class="line"><span class="keyword">var</span> child1 = <span class="keyword">new</span> Vue(&#123; parent: parent &#125;)</div><div class="line"><span class="keyword">var</span> child2 = <span class="keyword">new</span> Vue(&#123; parent: parent &#125;)</div><div class="line"><span class="comment">// child3 is nested under child2</span></div><div class="line"><span class="keyword">var</span> child3 = <span class="keyword">new</span> Vue(&#123; parent: child2 &#125;)</div><div class="line"></div><div class="line">child1.$on(<span class="string">'test'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'child1 notified'</span>)</div><div class="line">&#125;)</div><div class="line">child2.$on(<span class="string">'test'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'child2 notified'</span>)</div><div class="line">&#125;)</div><div class="line">child3.$on(<span class="string">'test'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'child3 notified'</span>)</div><div class="line">&#125;)</div><div class="line"></div><div class="line">parent.$broadcast(<span class="string">'test'</span>)</div><div class="line"><span class="comment">// -&gt; "child1 notified"</span></div><div class="line"><span class="comment">// -&gt; "child2 notified"</span></div><div class="line"><span class="comment">// child3 is NOT notified, because child2 didn't return</span></div><div class="line"><span class="comment">// true in its callback</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="Instance-Methods-DOM"><a href="#Instance-Methods-DOM" class="headerlink" title="Instance Methods / DOM"></a>Instance Methods / DOM</h2><h3 id="vm-appendTo">vm.$appendTo( elementOrSelector, [callback] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Element | String} elementOrSelector</code></li>
<li><code>{Function} [callback]</code></li>
</ul>
</li>
<li><p><strong>Returns:</strong> <code>vm</code> - the instance itself</p>
</li>
<li><p><strong>Usage:</strong></p>
<p>Append the Vue instance’s DOM element or fragment to target element. The target can be either an element or a querySelector string. This method will trigger transitions if present. The callback is fired after the transition has completed (or immediately if no transition has been triggered).</p>
</li>
</ul>
<h3 id="vm-before">vm.$before( elementOrSelector, [callback] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Element | String} elementOrSelector</code></li>
<li><code>{Function} [callback]</code></li>
</ul>
</li>
<li><p><strong>Returns:</strong> <code>vm</code> - the instance itself</p>
</li>
<li><p><strong>Usage:</strong></p>
<p>Insert the Vue instance’s DOM element or fragment before target element. The target can be either an element or a querySelector string. This method will trigger transitions if present. The callback is fired after the transition has completed (or immediately if no transition has been triggered).</p>
</li>
</ul>
<h3 id="vm-after">vm.$after( elementOrSelector, [callback] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Element | String} elementOrSelector</code></li>
<li><code>{Function} [callback]</code></li>
</ul>
</li>
<li><p><strong>Returns:</strong> <code>vm</code> - the instance itself</p>
</li>
<li><p><strong>Usage:</strong></p>
<p>Insert the Vue instance’s DOM element or fragment after target element. The target can be either an element or a querySelector string. This method will trigger transitions if present. The callback is fired after the transition has completed (or immediately if no transition has been triggered).</p>
</li>
</ul>
<h3 id="vm-remove">vm.$remove( [callback] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Function} [callback]</code></li>
</ul>
</li>
<li><p><strong>Returns:</strong> <code>vm</code> - the instance itself</p>
</li>
<li><p><strong>Usage:</strong></p>
<p>Remove the Vue instance’s DOM element or fragment from the DOM. This method will trigger transitions if present. The callback is fired after the transition has completed (or immediately if no transition has been triggered).</p>
</li>
</ul>
<h3 id="vm-nextTick">vm.$nextTick( callback )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Function} [callback]</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update. This is the same as the global <code>Vue.nextTick</code>, except that the callback’s <code>this</code> context is automatically bound to the instance calling this method.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">new</span> Vue(&#123;</div><div class="line">  <span class="comment">// ...</span></div><div class="line">  methods: &#123;</div><div class="line">    <span class="comment">// ...</span></div><div class="line">    example: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">      <span class="comment">// modify data</span></div><div class="line">      <span class="keyword">this</span>.message = <span class="string">'changed'</span></div><div class="line">      <span class="comment">// DOM is not updated yet</span></div><div class="line">      <span class="keyword">this</span>.$nextTick(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">        <span class="comment">// DOM is now updated</span></div><div class="line">        <span class="comment">// `this` is bound to the current instance</span></div><div class="line">        <span class="keyword">this</span>.doSomethingElse()</div><div class="line">      &#125;)</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong></p>
<ul>
<li><a href="#Vue-nextTick">Vue.nextTick</a></li>
<li><a href="/guide/reactivity.html#Async-Update-Queue">Async Update Queue</a></li>
</ul>
</li>
</ul>
<h2 id="Instance-Methods-Lifecycle"><a href="#Instance-Methods-Lifecycle" class="headerlink" title="Instance Methods / Lifecycle"></a>Instance Methods / Lifecycle</h2><h3 id="vm-mount">vm.$mount( [elementOrSelector] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Element | String} [elementOrSelector]</code></li>
</ul>
</li>
<li><p><strong>Returns:</strong> <code>vm</code> - the instance itself</p>
</li>
<li><p><strong>Usage:</strong></p>
<p>If a Vue instance didn’t receive the <code>el</code> option at instantiation, it will be in “unmounted” state, without an associated DOM element or fragment. <code>vm.$mount()</code> can be used to manually start the mounting/compilation of an unmounted Vue instance.</p>
<p>If no argument is provided, the template will be created as an out-of-document fragment, and you will have to use other DOM instance methods to insert it into the document yourself. If <code>replace</code> option is set to <code>false</code>, then an empty <code>&lt;div&gt;</code> will be automatically created as the wrapper element.</p>
<p>Calling <code>$mount()</code> on an already mounted instance will have no effect. The method returns the instance itself so you can chain other instance methods after it.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> MyComponent = Vue.extend(&#123;</div><div class="line">  template: <span class="string">'&lt;div&gt;Hello!&lt;/div&gt;'</span></div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="comment">// create and mount to #app (will replace #app)</span></div><div class="line"><span class="keyword">new</span> MyComponent().$mount(<span class="string">'#app'</span>)</div><div class="line"></div><div class="line"><span class="comment">// the above is the same as:</span></div><div class="line"><span class="keyword">new</span> MyComponent(&#123; el: <span class="string">'#app'</span> &#125;)</div><div class="line"></div><div class="line"><span class="comment">// or, compile off-document and append afterwards:</span></div><div class="line"><span class="keyword">new</span> MyComponent().$mount().$appendTo(<span class="string">'#container'</span>)</div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/instance.html#Lifecycle-Diagram">Lifecycle Diagram</a></p>
</li>
</ul>
<h3 id="vm-destroy">vm.$destroy( [remove] )</h3>

<ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Boolean} [remove] - default: false</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Completely destroy a vm. Clean up its connections with other existing vms, unbind all its directives, turn off all event listeners and, if the <code>remove</code> argument is true, remove its associated DOM element or fragment from the DOM.</p>
<p>Triggers the <code>beforeDestroy</code> and <code>destroyed</code> hooks.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/instance.html#Lifecycle-Diagram">Lifecycle Diagram</a></p>
</li>
</ul>
<h2 id="Directives"><a href="#Directives" class="headerlink" title="Directives"></a>Directives</h2><h3 id="v-text"><a href="#v-text" class="headerlink" title="v-text"></a>v-text</h3><ul>
<li><p><strong>Expects:</strong> <code>String</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>Updates the element’s <code>textContent</code>.</p>
<p>Internally, <code>{{ Mustache }}</code> interpolations are also compiled as a <code>v-text</code> directive on a textNode. The directive form requires a wrapper element, but offers slightly better performance and avoids FOUC (Flash of Uncompiled Content).</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-text</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line"><span class="comment">&lt;!-- same as --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="v-html"><a href="#v-html" class="headerlink" title="v-html"></a>v-html</h3><ul>
<li><p><strong>Expects:</strong> <code>String</code></p>
</li>
<li><p><strong>Details:</strong></p>
<p>Updates the element’s <code>innerHTML</code>. The contents are inserted as plain HTML - data bindings are ignored. If you need to reuse template pieces, you should use <a href="#partial">partials</a>.</p>
<p>Internally, <code>{{{ Mustache }}}</code> interpolations are also compiled as a <code>v-html</code> directive using anchor nodes. The directive form requires a wrapper element, but offers slightly better performance and avoids FOUC (Flash of Uncompiled Content).</p>
<p class="tip">Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to <a href="https://en.wikipedia.org/wiki/Cross-site_scripting" target="_blank" rel="external">XSS attacks</a>. Only use <code>v-html</code> on trusted content and <strong>never</strong> on user-provided content.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-html</span>=<span class="string">"html"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="comment">&lt;!-- same as --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;&#123;&#123;html&#125;&#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="v-if"><a href="#v-if" class="headerlink" title="v-if"></a>v-if</h3><ul>
<li><p><strong>Expects:</strong> <code>*</code></p>
</li>
<li><p><strong>Usage:</strong></p>
<p>Conditionally render the element based on the truthy-ness of the expression value. The element and its contained data bindings / components are destroyed and re-constructed during toggles. If the element is a <code>&lt;template&gt;</code> element, its content will be extracted as the conditional block.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/conditional.html">Conditional Rendering</a></p>
</li>
</ul>
<h3 id="v-show"><a href="#v-show" class="headerlink" title="v-show"></a>v-show</h3><ul>
<li><p><strong>Expects:</strong> <code>*</code></p>
</li>
<li><p><strong>Usage:</strong></p>
<p>Toggle’s the element’s <code>display</code> CSS property based on the truthy-ness of the expression value. Triggers transitions if present.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/conditional.html#v-show">Conditional Rendering - v-show</a></p>
</li>
</ul>
<h3 id="v-else"><a href="#v-else" class="headerlink" title="v-else"></a>v-else</h3><ul>
<li><p><strong>Does not expect expression</strong></p>
</li>
<li><p><strong>Restriction:</strong> previous sibling element must have <code>v-if</code> or <code>v-show</code>.</p>
</li>
<li><p><strong>Usage:</strong></p>
<p>Denote the “else block” for <code>v-if</code> and <code>v-show</code>.</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"Math.random() &gt; 0.5"</span>&gt;</span></div><div class="line">  Sorry</div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-else</span>&gt;</span></div><div class="line">  Not sorry</div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/conditional.html#v-else">Conditional Rendering - v-else</a></p>
</li>
<li><strong>See also:</strong> <a href="/guide/conditional.html#Component-caveat">Conditional Rendering - Component caveat</a></li>
</ul>
<h3 id="v-for"><a href="#v-for" class="headerlink" title="v-for"></a>v-for</h3><ul>
<li><p><strong>Expects:</strong> <code>Array | Object | Number | String</code></p>
</li>
<li><p><strong>Param Attributes:</strong></p>
<ul>
<li><a href="/guide/list.html#track-by"><code>track-by</code></a></li>
<li><a href="/guide/transitions.html#Staggering-Transitions"><code>stagger</code></a></li>
<li><a href="/guide/transitions.html#Staggering-Transitions"><code>enter-stagger</code></a></li>
<li><a href="/guide/transitions.html#Staggering-Transitions"><code>leave-stagger</code></a></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Render the element or template block multiple times based on the source data. The directive’s value must use the special syntax <code>alias (in|of) expression</code> to provide an alias for the current element being iterated on:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in items"</span>&gt;</span></div><div class="line">  &#123;&#123; item.text &#125;&#125;</div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Note using <code>of</code> as the delimiter is only supported in 1.0.17+.</p>
<p>Alternatively, you can also specify an alias for the index (or the key if used on an Object):</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(index, item) in items"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(key, val) in object"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>The detailed usage for <code>v-for</code> is explained in the guide section linked below.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/list.html">List Rendering</a>.</p>
</li>
</ul>
<h3 id="v-on"><a href="#v-on" class="headerlink" title="v-on"></a>v-on</h3><ul>
<li><p><strong>Shorthand:</strong> <code>@</code></p>
</li>
<li><p><strong>Expects:</strong> <code>Function | Inline Statement</code></p>
</li>
<li><p><strong>Argument:</strong> <code>event (required)</code></p>
</li>
<li><p><strong>Modifiers:</strong></p>
<ul>
<li><code>.stop</code> - call <code>event.stopPropagation()</code>.</li>
<li><code>.prevent</code> - call <code>event.preventDefault()</code>.</li>
<li><code>.capture</code> - add event listener in capture mode.</li>
<li><code>.self</code> - only trigger handler if event was dispatched from this element.</li>
<li><code>.{keyCode | keyAlias}</code> - only trigger handler on certain keys.</li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Attaches an event listener to the element. The event type is denoted by the argument. The expression can either be a method name or an inline statement, or simply omitted when there are modifiers present.</p>
<p>When used on a normal element, it listens to <strong>native DOM events</strong> only. When used on a custom element component, it also listens to <strong>custom events</strong> emitted on that child component.</p>
<p>When listening to native DOM events, the method receives the native event as the only argument. If using inline statement, the statement has access to the special <code>$event</code> property: <code>v-on:click=&quot;handle(&#39;ok&#39;, $event)&quot;</code>.</p>
<p><strong>1.0.11+</strong> When listening the custom events, inline statements have access to the special <code>$arguments</code> property, which is an array of the additional arguments passed to the child components’ <code>$emit</code> call.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment">&lt;!-- method handler --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"doThis"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- inline statement --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"doThat('hello', $event)"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- shorthand --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"doThis"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- stop propagation --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click.stop</span>=<span class="string">"doThis"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- prevent default --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click.prevent</span>=<span class="string">"doThis"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- prevent default without expression --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">form</span> @<span class="attr">submit.prevent</span>&gt;</span><span class="tag">&lt;/<span class="name">form</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- chain modifiers --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click.stop.prevent</span>=<span class="string">"doThis"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- key modifier using keyAlias --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">input</span> @<span class="attr">keyup.enter</span>=<span class="string">"onEnter"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- key modifier using keyCode --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">input</span> @<span class="attr">keyup.13</span>=<span class="string">"onEnter"</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Listening to custom events on a child component (the handler is called when “my-event” is emitted on the child):</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">my-component</span> @<span class="attr">my-event</span>=<span class="string">"handleThis"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- inline statement --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">my-component</span> @<span class="attr">my-event</span>=<span class="string">"handleThis(123, $arguments)"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/events.html">Methods and Event Handling</a></p>
</li>
</ul>
<h3 id="v-bind"><a href="#v-bind" class="headerlink" title="v-bind"></a>v-bind</h3><ul>
<li><p><strong>Shorthand:</strong> <code>:</code></p>
</li>
<li><p><strong>Expects:</strong> <code>* (with argument) | Object (without argument)</code></p>
</li>
<li><p><strong>Argument:</strong> <code>attrOrProp (optional)</code></p>
</li>
<li><p><strong>Modifiers:</strong></p>
<ul>
<li><code>.sync</code> - make the binding two-way. Only respected for prop bindings.</li>
<li><code>.once</code> - make the binding one-time. Only respected for prop bindings.</li>
<li><code>.camel</code> - convert the attribute name to camelCase when setting it. Only respected for normal attributes. Used for binding camelCase SVG attributes.</li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Dynamically bind one or more attributes, or a component prop to an expression.</p>
<p>When used to bind the <code>class</code> or <code>style</code> attribute, it supports additional value types such as Array or Objects. See linked guide section below for more details.</p>
<p>When used for prop binding, the prop must be properly declared in the child component. Prop bindings can specify a different binding type using one of the modifiers.</p>
<p>When used without an argument, can be used to bind an object containing attribute name-value pairs. Note in this mode <code>class</code> and <code>style</code> does not support Array or Objects.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment">&lt;!-- bind an attribute --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">v-bind:src</span>=<span class="string">"imageSrc"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- shorthand --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">:src</span>=<span class="string">"imageSrc"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- class binding --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"&#123; red: isRed &#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"[classA, classB]"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"[classA, &#123; classB: isB, classC: isC &#125;]"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- style binding --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:style</span>=<span class="string">"&#123; fontSize: size + 'px' &#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:style</span>=<span class="string">"[styleObjectA, styleObjectB]"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- binding an object of attributes --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind</span>=<span class="string">"&#123; id: someProp, 'other-attr': otherProp &#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- prop binding. "prop" must be declared in my-component. --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">my-component</span> <span class="attr">:prop</span>=<span class="string">"someThing"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- two-way prop binding --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">my-component</span> <span class="attr">:prop.sync</span>=<span class="string">"someThing"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- one-time prop binding --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">my-component</span> <span class="attr">:prop.once</span>=<span class="string">"someThing"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong></p>
<ul>
<li><a href="/guide/class-and-style.html">Class and Style Bindings</a></li>
<li><a href="/guide/components.html#Props">Component Props</a></li>
</ul>
</li>
</ul>
<h3 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h3><ul>
<li><p><strong>Expects:</strong> varies based on input type</p>
</li>
<li><p><strong>Limited to:</strong></p>
<ul>
<li><code>&lt;input&gt;</code></li>
<li><code>&lt;select&gt;</code></li>
<li><code>&lt;textarea&gt;</code></li>
</ul>
</li>
<li><p><strong>Param Attributes:</strong></p>
<ul>
<li><a href="/guide/forms.html#lazy"><code>lazy</code></a></li>
<li><a href="/guide/forms.html#number"><code>number</code></a></li>
<li><a href="/guide/forms.html#debounce"><code>debounce</code></a></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Create a two-way binding on a form input element. For detailed usage, see guide section linked below.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/forms.html">Form Input Bindings</a></p>
</li>
</ul>
<h3 id="v-ref"><a href="#v-ref" class="headerlink" title="v-ref"></a>v-ref</h3><ul>
<li><p><strong>Does not expect expression</strong></p>
</li>
<li><p><strong>Limited to:</strong> child components</p>
</li>
<li><p><strong>Argument:</strong> <code>id (required)</code></p>
</li>
<li><p><strong>Usage:</strong></p>
<p>Register a reference to a child component on its parent for direct access. Does not expect an expression. Must provide an argument as the id to register with. The component instance will be accessible on its parent’s <code>$refs</code> object.</p>
<p>When used on a component together with <code>v-for</code>, the registered value will be an Array containing all the child component instances corresponding to the Array they are bound to. If the data source for <code>v-for</code> is an Object, the registered value will be an Object containing key-instance pairs mirroring the source Object.</p>
</li>
<li><p><strong>Note:</strong></p>
<p>Because HTML is case-insensitive, camelCase usage like <code>v-ref:someRef</code> will be converted to all lowercase. You can use <code>v-ref:some-ref</code> which properly sets <code>this.$refs.someRef</code>.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">comp</span> <span class="attr">v-ref:child</span>&gt;</span><span class="tag">&lt;/<span class="name">comp</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">comp</span> <span class="attr">v-ref:some-child</span>&gt;</span><span class="tag">&lt;/<span class="name">comp</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// access from parent:</span></div><div class="line"><span class="keyword">this</span>.$refs.child</div><div class="line"><span class="keyword">this</span>.$refs.someChild</div></pre></td></tr></table></figure>
<p>With <code>v-for</code>:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">comp</span> <span class="attr">v-ref:list</span> <span class="attr">v-for</span>=<span class="string">"item in list"</span>&gt;</span><span class="tag">&lt;/<span class="name">comp</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// this will be an array in parent</span></div><div class="line"><span class="keyword">this</span>.$refs.list</div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/components.html#Child-Component-Refs">Child Component Refs</a></p>
</li>
</ul>
<h3 id="v-el"><a href="#v-el" class="headerlink" title="v-el"></a>v-el</h3><ul>
<li><p><strong>Does not expect expression</strong></p>
</li>
<li><p><strong>Argument:</strong> <code>id (required)</code></p>
</li>
<li><p><strong>Usage:</strong></p>
<p>Register a reference to a DOM element on its owner Vue instance’s <code>$els</code> object for easier access.</p>
</li>
<li><p><strong>Note:</strong></p>
<p>Because HTML is case-insensitive, camelCase usage like <code>v-el:someEl</code> will be converted to all lowercase. You can use <code>v-el:some-el</code> which properly sets <code>this.$els.someEl</code>.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-el:msg</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-el:other-msg</span>&gt;</span>world<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">this</span>.$els.msg.textContent <span class="comment">// -&gt; "hello"</span></div><div class="line"><span class="keyword">this</span>.$els.otherMsg.textContent <span class="comment">// -&gt; "world"</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="v-pre"><a href="#v-pre" class="headerlink" title="v-pre"></a>v-pre</h3><ul>
<li><p><strong>Does not expect expression</strong></p>
</li>
<li><p><strong>Usage</strong></p>
<p>Skip compilation for this element and all its children. You can use this for displaying raw mustache tags. Skipping large numbers of nodes with no directives on them can also speed up compilation.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-pre</span>&gt;</span>&#123;&#123; this will not be compiled &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="v-cloak"><a href="#v-cloak" class="headerlink" title="v-cloak"></a>v-cloak</h3><ul>
<li><p><strong>Does not expect expression</strong></p>
</li>
<li><p><strong>Usage:</strong></p>
<p>This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as <code>[v-cloak] { display: none }</code>, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight css"><table><tr><td class="code"><pre><div class="line"><span class="selector-attr">[v-cloak]</span> &#123;</div><div class="line">  <span class="attribute">display</span>: none;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-cloak</span>&gt;</span></div><div class="line">  &#123;&#123; message &#125;&#125;</div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>The <code>&lt;div&gt;</code> will not be visible until the compilation is done.</p>
</li>
</ul>
<h2 id="Special-Elements"><a href="#Special-Elements" class="headerlink" title="Special Elements"></a>Special Elements</h2><h3 id="component"><a href="#component" class="headerlink" title="component"></a>component</h3><ul>
<li><p><strong>Attributes:</strong></p>
<ul>
<li><code>is</code></li>
</ul>
</li>
<li><p><strong>Param Attributes:</strong></p>
<ul>
<li><a href="/guide/components.html#keep-alive"><code>keep-alive</code></a></li>
<li><a href="/guide/components.html#transition-mode"><code>transition-mode</code></a></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Alternative syntax for invoking components. Primarily used for dynamic components with the <code>is</code> attribute:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment">&lt;!-- a dynamic component controlled by --&gt;</span></div><div class="line"><span class="comment">&lt;!-- the `componentId` property on the vm --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"componentId"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/components.html#Dynamic-Components">Dynamic Components</a></p>
</li>
</ul>
<h3 id="slot"><a href="#slot" class="headerlink" title="slot"></a>slot</h3><ul>
<li><p><strong>Attributes:</strong></p>
<ul>
<li><code>name</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p><code>&lt;slot&gt;</code> elements serve as content distribution outlets in component templates. The slot element itself will be replaced.</p>
<p>A slot with the <code>name</code> attribute is called a named slot. A named slot will distribute content with a <code>slot</code> attribute that matches its name.</p>
<p>For detailed usage, see the guide section linked below.</p>
</li>
<li><p><strong>See also:</strong> <a href="/guide/components.html#Content-Distribution-with-Slots">Content Distribution with Slots</a></p>
</li>
</ul>
<h3 id="partial"><a href="#partial" class="headerlink" title="partial"></a>partial</h3><ul>
<li><p><strong>Attributes:</strong></p>
<ul>
<li><code>name</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p><code>&lt;partial&gt;</code> elements serve as outlets for registered template partials. Partial contents are also compiled by Vue when inserted. The <code>&lt;partial&gt;</code> element itself will be replaced. It requires a <code>name</code> attribute which will be used to resolve the partial’s content.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// registering a partial</span></div><div class="line">Vue.partial(<span class="string">'my-partial'</span>, <span class="string">'&lt;p&gt;This is a partial! &#123;&#123;msg&#125;&#125;&lt;/p&gt;'</span>)</div></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment">&lt;!-- a static partial --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">partial</span> <span class="attr">name</span>=<span class="string">"my-partial"</span>&gt;</span><span class="tag">&lt;/<span class="name">partial</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- a dynamic partial --&gt;</span></div><div class="line"><span class="comment">&lt;!-- renders partial with id === vm.partialId --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">partial</span> <span class="attr">v-bind:name</span>=<span class="string">"partialId"</span>&gt;</span><span class="tag">&lt;/<span class="name">partial</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- dynamic partial using v-bind shorthand --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">partial</span> <span class="attr">:name</span>=<span class="string">"partialId"</span>&gt;</span><span class="tag">&lt;/<span class="name">partial</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="Filters"><a href="#Filters" class="headerlink" title="Filters"></a>Filters</h2><h3 id="capitalize"><a href="#capitalize" class="headerlink" title="capitalize"></a>capitalize</h3><ul>
<li><p><strong>Example:</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line">&#123;&#123; msg | capitalize &#125;&#125;</div></pre></td></tr></table></figure>
<p><em>‘abc’ =&gt; ‘Abc’</em></p>
</li>
</ul>
<h3 id="uppercase"><a href="#uppercase" class="headerlink" title="uppercase"></a>uppercase</h3><ul>
<li><p><strong>Example:</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line">&#123;&#123; msg | uppercase &#125;&#125;</div></pre></td></tr></table></figure>
<p><em>‘abc’ =&gt; ‘ABC’</em></p>
</li>
</ul>
<h3 id="lowercase"><a href="#lowercase" class="headerlink" title="lowercase"></a>lowercase</h3><ul>
<li><p><strong>Example:</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line">&#123;&#123; msg | lowercase &#125;&#125;</div></pre></td></tr></table></figure>
<p><em>‘ABC’ =&gt; ‘abc’</em></p>
</li>
</ul>
<h3 id="currency"><a href="#currency" class="headerlink" title="currency"></a>currency</h3><ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} [symbol] - default: &#39;$&#39;</code></li>
<li><strong>1.0.22+</strong> <code>{Number} [decimal places] - default: 2</code></li>
</ul>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line">&#123;&#123; amount | currency &#125;&#125;</div></pre></td></tr></table></figure>
<p><em>12345 =&gt; $12,345.00</em></p>
<p>Use a different symbol:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line">&#123;&#123; amount | currency '£' &#125;&#125;</div></pre></td></tr></table></figure>
<p><em>12345 =&gt; £12,345.00</em></p>
<p>Some currencies have 3 or 4 decimal places, while some others have none, for example Japanese Yen (¥) or Vietnamese Dong (₫):</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line">&#123;&#123; amount | currency '₫' 0 &#125;&#125;</div></pre></td></tr></table></figure>
<p><em>12345 =&gt; ₫12,345</em></p>
</li>
</ul>
<h3 id="pluralize"><a href="#pluralize" class="headerlink" title="pluralize"></a>pluralize</h3><ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String} single, [double, triple, ...]</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Pluralizes the argument based on the filtered value. When there is exactly one argument, plural forms simply add an “s” at the end. When there are more than one argument, the arguments will be used as array of strings corresponding to the single, double, triple … forms of the word to be pluralized. When the number to be pluralized exceeds the length of the arguments, it will use the last entry in the array.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line">&#123;&#123;count&#125;&#125; &#123;&#123;count | pluralize 'item'&#125;&#125;</div></pre></td></tr></table></figure>
<p><em>1 =&gt; ‘1 item’</em><br><em>2 =&gt; ‘2 items’</em></p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line">&#123;&#123;date&#125;&#125;&#123;&#123;date | pluralize 'st' 'nd' 'rd' 'th'&#125;&#125;</div></pre></td></tr></table></figure>
<p>Will result in:</p>
<p><em>1 =&gt; ‘1st’</em><br><em>2 =&gt; ‘2nd’</em><br><em>3 =&gt; ‘3rd’</em><br><em>4 =&gt; ‘4th’</em><br><em>5 =&gt; ‘5th’</em></p>
</li>
</ul>
<h3 id="json"><a href="#json" class="headerlink" title="json"></a>json</h3><ul>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Number} [indent] - default: 2</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Output the result of calling <code>JSON.stringify()</code> on the value instead of outputting the <code>toString()</code> value (e.g. <code>[object Object]</code>).</p>
</li>
<li><p><strong>Example:</strong></p>
<p>Print an object with 4-space indent:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">pre</span>&gt;</span>&#123;&#123; nestedObject | json 4 &#125;&#125;<span class="tag">&lt;/<span class="name">pre</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="debounce"><a href="#debounce" class="headerlink" title="debounce"></a>debounce</h3><ul>
<li><p><strong>Limited to:</strong> directives that expect <code>Function</code> values, e.g. <code>v-on</code></p>
</li>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Number} [wait] - default: 300</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Wrap the handler to debounce it for <code>x</code> milliseconds, where <code>x</code> is the argument. Default wait time is 300ms. A debounced handler will be delayed until at least <code>x</code> ms has passed after the call moment; if the handler is called again before the delay period, the delay period is reset to <code>x</code> ms.</p>
</li>
<li><p><strong>Example:</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">input</span> @<span class="attr">keyup</span>=<span class="string">"onKeyup | debounce 500"</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="limitBy"><a href="#limitBy" class="headerlink" title="limitBy"></a>limitBy</h3><ul>
<li><p><strong>Limited to:</strong> directives that expect <code>Array</code> values, e.g. <code>v-for</code></p>
</li>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{Number} limit</code></li>
<li><code>{Number} [offset]</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Limit the array to the first N items, as specified by the argument. An optional second argument can be provided to set a starting offset.</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment">&lt;!-- only display first 10 items --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in items | limitBy 10"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- display items 5 to 15 --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in items | limitBy 10 5"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="filterBy"><a href="#filterBy" class="headerlink" title="filterBy"></a>filterBy</h3><ul>
<li><p><strong>Limited to:</strong> directives that expect <code>Array</code> values, e.g. <code>v-for</code></p>
</li>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String | Function} targetStringOrFunction</code></li>
<li><code>&quot;in&quot; (optional delimiter)</code></li>
<li><code>{String} [...searchKeys]</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Return a filtered version of the source Array. The first argument can either be a string or a function.</p>
<p>When the first argument is a string, it will be used as the target string to search for in each element of the Array:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in items | filterBy 'hello'"</span>&gt;</span></div></pre></td></tr></table></figure>
<p>In the above example, only items that contain the target string <code>&quot;hello&quot;</code> will be displayed.</p>
<p>If the item is an object, the filter will recursively search every nested property of the object for the target string. To narrow down the search scope, additional search keys can be specified:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"user in users | filterBy 'Jack' in 'name'"</span>&gt;</span></div></pre></td></tr></table></figure>
<p>In the above example, the filter will only search for <code>&quot;Jack&quot;</code> in the <code>name</code> field of each user object. <strong>It is a good idea to always limit the search scope for better performance.</strong></p>
<p>The examples above are using static arguments - we can, of course, use dynamic arguments as target string or search keys. Combined with <code>v-model</code> we can easily implement type-ahead filtering:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"filter-by-example"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"name"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"user in users | filterBy name in 'name'"</span>&gt;</span></div><div class="line">      &#123;&#123; user.name &#125;&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">new</span> Vue(&#123;</div><div class="line">  el: <span class="string">'#filter-by-example'</span>,</div><div class="line">  data: &#123;</div><div class="line">    name: <span class="string">''</span>,</div><div class="line">    users: [</div><div class="line">      &#123; name: <span class="string">'Bruce'</span> &#125;,</div><div class="line">      &#123; name: <span class="string">'Chuck'</span> &#125;,</div><div class="line">      &#123; name: <span class="string">'Jackie'</span> &#125;</div><div class="line">    ]</div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>

  <div id="filter-by-example" class="demo">
    <input v-model="name">
    <ul>
      <li v-for="user in users | filterBy name in 'name'">
        {{ user.name }}
      </li>
    </ul>
  </div>
  <script>
  new Vue({
    el: '#filter-by-example',
    data: {
      name: '',
      users: [{ name: 'Bruce' }, { name: 'Chuck' }, { name: 'Jackie' }]
    }
  })
  </script>
  
</li>
<li><p><strong>Additional Examples:</strong></p>
<p>Multiple search keys:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"user in users | filterBy searchText in 'name' 'phone'"</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Multiple search keys with a dynamic Array argument:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment">&lt;!-- fields = ['fieldA', 'fieldB'] --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"user in users | filterBy searchText in fields"</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Use a custom filter function:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"user in users | filterBy myCustomFilterFunction"</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="orderBy"><a href="#orderBy" class="headerlink" title="orderBy"></a>orderBy</h3><ul>
<li><p><strong>Limited to:</strong> directives that expect <code>Array</code> values, e.g. <code>v-for</code></p>
</li>
<li><p><strong>Arguments:</strong></p>
<ul>
<li><code>{String | Array&lt;String&gt; | Function} ...sortKeys</code></li>
<li><code>{String} [order] - default: 1</code></li>
</ul>
</li>
<li><p><strong>Usage:</strong></p>
<p>Return a sorted version of the source Array. You can pass any number of Strings to sort on keys. You can also pass an array containing the sorting keys or a Function if you want to use your own sorting strategy instead. The optional <code>order</code> argument specifies whether the result should be in ascending (<code>order &gt;= 0</code>) or descending (<code>order &lt; 0</code>) order.</p>
<p>For arrays of primitive values, simply omit <code>sortKeys</code> and provide the order, e.g. <code>orderBy 1</code>.</p>
</li>
<li><p><strong>Example:</strong></p>
<p>Sort users by name:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"user in users | orderBy 'name'"</span>&gt;</span></div><div class="line">    &#123;&#123; user.name &#125;&#125;</div><div class="line">  <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div></pre></td></tr></table></figure>
<p>In descending order:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"user in users | orderBy 'name' -1"</span>&gt;</span></div><div class="line">    &#123;&#123; user.name &#125;&#125;</div><div class="line">  <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Sort primitive values:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"n in numbers | orderBy true"</span>&gt;</span></div><div class="line">    &#123;&#123; n &#125;&#125;</div><div class="line">  <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Dynamic sort order:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"orderby-example"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"order = order * -1"</span>&gt;</span>Reverse Sort Order<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"user in users | orderBy 'name' order"</span>&gt;</span></div><div class="line">      &#123;&#123; user.name &#125;&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">new</span> Vue(&#123;</div><div class="line">  el: <span class="string">'#orderby-example'</span>,</div><div class="line">  data: &#123;</div><div class="line">    order: <span class="number">1</span>,</div><div class="line">    users: [&#123; name: <span class="string">'Bruce'</span> &#125;, &#123; name: <span class="string">'Chuck'</span> &#125;, &#123; name: <span class="string">'Jackie'</span> &#125;]</div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>Sort using two keys:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"user in users | orderBy 'lastName' 'firstName'"</span>&gt;</span></div><div class="line">    &#123;&#123; user.lastName &#125;&#125; &#123;&#123; user.firstName &#125;&#125;</div><div class="line">  <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div></pre></td></tr></table></figure>

  <div id="orderby-example" class="demo">
    <button @click="order = order * -1">Reverse Sort Order</button>
    <ul>
      <li v-for="user in users | orderBy 'name' order">
        {{ user.name }}
      </li>
    </ul>
  </div>
  <script>
  new Vue({
    el: '#orderby-example',
    data: {
      order: 1,
      users: [{ name: 'Bruce' }, { name: 'Chuck' }, { name: 'Jackie' }]
    }
  })
  </script>
  
<p>Sort using a Function:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"orderby-compare-example"</span> <span class="attr">class</span>=<span class="string">"demo"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"order = order * -1"</span>&gt;</span>Reverse Sort Order<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"user in users | orderBy ageByTen order"</span>&gt;</span></div><div class="line">      &#123;&#123; user.name &#125;&#125; - &#123;&#123; user.age &#125;&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">new</span> Vue(&#123;</div><div class="line">  el: <span class="string">'#orderby-compare-example'</span>,</div><div class="line">  data: &#123;</div><div class="line">    order: <span class="number">1</span>,</div><div class="line">    users: [</div><div class="line">      &#123;</div><div class="line">        name: <span class="string">'Jackie'</span>,</div><div class="line">        age: <span class="number">62</span></div><div class="line">      &#125;,</div><div class="line">      &#123;</div><div class="line">        name: <span class="string">'Chuck'</span>,</div><div class="line">        age: <span class="number">76</span></div><div class="line">      &#125;,</div><div class="line">      &#123;</div><div class="line">        name: <span class="string">'Bruce'</span>,</div><div class="line">        age: <span class="number">61</span></div><div class="line">      &#125;</div><div class="line">    ]</div><div class="line">  &#125;,</div><div class="line">  methods: &#123;</div><div class="line">    ageByTen: <span class="function"><span class="keyword">function</span> (<span class="params">a, b</span>) </span>&#123;</div><div class="line">      <span class="keyword">return</span> <span class="built_in">Math</span>.floor(a.age / <span class="number">10</span>) - <span class="built_in">Math</span>.floor(b.age / <span class="number">10</span>)</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>

  <div id="orderby-compare-example" class="demo">
    <button @click="order = order * -1">Reverse Sort Order</button>
    <ul id="orderby-compare-example">
      <li v-for="user in users | orderBy ageByTen order">
        {{ user.name }} - {{ user.age }}
      </li>
    </ul>
  </div>
  <script>
  new Vue({
    el: '#orderby-compare-example',
    data: {
      order: 1,
      users: [
        {
          name: 'Jackie',
          age: 62
        },
        {
          name: 'Chuck',
          age: 76
        },
        {
          name: 'Bruce',
          age: 61
        }
      ]
    },
    methods: {
      ageByTen: function (a, b) {
        return Math.floor(a.age / 10) - Math.floor(b.age / 10)
      }
    }
  })
  </script>
  
</li>
</ul>
<h2 id="Array-Extension-Methods"><a href="#Array-Extension-Methods" class="headerlink" title="Array Extension Methods"></a>Array Extension Methods</h2><p>Vue.js extends <code>Array.prototype</code> with two additional methods that makes it easier to perform some common Array operations while ensuring reactive updates are properly triggered.</p>
<h3 id="array-set-index-value"><a href="#array-set-index-value" class="headerlink" title="array.$set(index, value)"></a>array.$set(index, value)</h3><ul>
<li><p><strong>Arguments</strong></p>
<ul>
<li><code>{Number} index</code></li>
<li><code>{*} value</code></li>
</ul>
</li>
<li><p><strong>Usage</strong></p>
<p>Set an element in the array to a value by index and trigger view updates.</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">vm.animals.$set(<span class="number">0</span>, &#123; name: <span class="string">'Aardvark'</span> &#125;)</div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/list.html#Caveats">Array Detection Caveats</a></p>
</li>
</ul>
<h3 id="array-remove-reference"><a href="#array-remove-reference" class="headerlink" title="array.$remove(reference)"></a>array.$remove(reference)</h3><ul>
<li><p><strong>Arguments</strong></p>
<ul>
<li><code>{Reference} reference</code></li>
</ul>
</li>
<li><p><strong>Usage</strong></p>
<p>Remove an element from an array by reference and trigger view updates. This is a sugar method for first searching for the element in the array, and then if found, calling <code>array.splice(index, 1)</code>.</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> aardvark = vm.animals[<span class="number">0</span>]</div><div class="line">vm.animals.$remove(aardvark)</div></pre></td></tr></table></figure>
</li>
<li><p><strong>See also:</strong> <a href="/guide/list.html#Mutation-Methods">Mutation Methods</a></p>
</li>
</ul>

    
    <div class="footer">
      Caught a mistake or want to contribute to the documentation?
      <a href="https://github.com/vuejs/vuejs.org/blob/master/src/api/index.md" target="_blank">
        Edit this page on Github!
      </a>
    </div>
</div>

                
            </div>
            <script src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
            <script src="/js/smooth-scroll.min.js"></script>
            <script src="/js/common.js"></script>
        

        <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script><script src="https://cdn.jsdelivr.net/gh/shentao/vuejs-outdated-docs-modal@v1.3/prompt.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        </script>
    </body>
</html>
